<script lang="ts" setup>
import commonApi from '/@/api/common';
import { ref, onMounted } from 'vue';
import api from '/@/api/email/index';
import { LoadingSvg } from '/@/utils/loading';
import { useRouter } from 'vue-router';
import AddFinalPayMent from './components/AddFinalPayMent.vue'
import RefundList from './components/RefundList.vue'

defineOptions({ name: 'orderIndex' })

const router = useRouter();
const tableData = ref([]);
const tableHeight = ref(500);

const form = ref<any>({});
const queryForm = ref<any>({});

const loading = ref(false);
const statusData = ref<any>([]);

const showAddFinalPayMent = ref(false)
const AddFinalPayMentRef = ref()
// const showSettleFinalPayMent = ref(false)
// const SettleFinalPayMentRef = ref()
const showRefundList = ref(false)
const RefundListRef = ref()
const pagination = ref({
  page: 1,
  size: 10,
  total: 0
});

const handleQuery = () => {
  pagination.value.page = 1;
  getList();
};

const handleReset = () => {
  queryForm.value = {};
};

const getList = async () => {
  loading.value = true;
  const res = await api.order.getList({
    pageNum: pagination.value.page,
    pageSize: pagination.value.size,
    ...queryForm.value
  });
  loading.value = false;
  if (res.code === 200) {
    tableData.value = res.data;
    pagination.value.total = res.total;
  }
};

const handleDel = async (row: any) => {
  ElMessageBox.confirm('确认删除吗?', { cancelButtonText: '取消', confirmButtonText: '确认', type: 'warning' }).then(async () => {
    const res = await api.order.del(row.id);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      getList();
    }
  });
};

const handleEdit = (row: any) => {
    router.push({
        name: 'orderEdit',
        params: {
          id: row.id
        }
    })
};

const handleAddFinalPayMent = (row: any) => {
    showAddFinalPayMent.value = true
    AddFinalPayMentRef.value.ruleForm.orderId = row.id
    AddFinalPayMentRef.value.getInfo()
}

// const handleSettleFinalPayMent = (row: any) => {
//     showSettleFinalPayMent.value = true
//     SettleFinalPayMentRef.value.ruleForm.orderId = row.id
// }

const handleRefund = (row: any) => {
    showRefundList.value = true
    RefundListRef.value.orderId = row.id
    RefundListRef.value.getInfo()
}

const handleAdd = () => {
    router.push({
        name: 'orderCreate'
    })
};

const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getList();
};

const getStatus = async () => {
  const { data, code } = await commonApi.getDictData('order_status');
  if (code === 200) {
    statusData.value = data;
  }
};

onMounted(() => {
  getList();
  getStatus()

  const setTableHeight = () => {
    tableHeight.value = window.innerHeight - 120 // 80 为顶部距离，根据实际情况设置
  }
  setTableHeight()
  window.addEventListener('resize', setTableHeight);
});
</script>
<template>
  <div class="main">
    <el-form class="btn_con" v-model="form">
      <el-row gutter="8">
        <el-col :span="6">
        </el-col>
        <el-col :span="5">
        </el-col>
        <el-col :span="5">
        </el-col>
        <el-col :span="8" class="add_btn">
          <el-button @click="handleQuery" type="primary">搜索</el-button>
          <el-button @click="handleReset" type="primary">重置</el-button>
          <el-button @click="handleAdd" type="primary">创建订单</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table :data="tableData" border style="width: 100%" :height="tableHeight" v-loading="loading" element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg">
        <!-- <el-table-column prop="orderNo" label="订单号" /> -->
        <el-table-column prop="companyCode" label="公司编号" />
        <el-table-column prop="pi" label="PI号码" />
        <el-table-column prop="po" label="PO号码" />
        <el-table-column prop="clientName" label="客户名称" />
        <el-table-column label="订单金额">
            <template #default="{ row }">
              <el-space>
                <span v-if="row.orderAmountRmb">{{ row.orderAmountRmb }}(RMB)</span>
                <span v-if="row.orderAmountUsd">{{ row.orderAmountUsd }}(USD)</span>
              </el-space>
            </template>
        </el-table-column>
        <el-table-column prop="deliverDate" label="预计发货日期" />
        <el-table-column prop="arrivedDate" label="预计到货日期" />
        <el-table-column prop="orderStatus" label="状态">
            <template #default="{ row }">
                <span v-if="statusData.length">{{ statusData.find((item: any) => item.dictValue === String(row.orderStatus))?.dictLabel }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="370" fixed="right">
          <template #default="{ row }">
            <el-button plain type="primary" size="small" @click="handleEdit(row)">{{ +row.orderStatus > -1 ? '查看' : '编辑' }}</el-button>
            <el-button v-if="+row.orderStatus > 0" plain type="primary" size="small" @click="handleAddFinalPayMent(row)">添加尾款</el-button>
            <!-- <el-button v-if="+row.orderStatus > 0" plain type="primary" size="small" @click="handleSettleFinalPayMent(row)">结清尾款</el-button> -->
            <el-button v-if="+row.orderStatus > 0" plain type="primary" size="small" @click="handleRefund(row)">退款</el-button>
            <el-button v-if="+row.orderStatus < 1" plain type="primary" size="small" @click="handleDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_con">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :total="pagination.total"
          small background layout="prev, pager, next"
        />
      </div>
    </div>

    <AddFinalPayMent ref="AddFinalPayMentRef" v-model="showAddFinalPayMent" @refresh="getList" />
    <RefundList ref="RefundListRef" v-model="showRefundList" />
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  padding: 20px;
}

.pagination_con {
  display: flex;
  justify-content: end;
  padding: 10px;
  background: #fff;
}

.btn_con {
  padding: 7px 10px;
}

.add_btn {
  display: flex;
  justify-content: right;
  align-items: center;
}
</style>
  